<template>
  <view class="content">
    <view class="button-box" @click="navigateToWarehousing">
      <view class="min-box">
        <image src="/static/outk.png" mode="scaleToFill" />
        <text class="button-text">入库任务</text>
      </view>
    </view>
    <view class="button-box" @click="navigateToOutbound">
      <view class="min-box">
        <image src="/static/ink.png" mode="scaleToFill" />
        <text class="button-text">出库任务</text>
      </view>
    </view>
    <view class="button-box" @click="navigateToRelocation">
      <view class="min-box">
        <image src="/static/movek.png" mode="scaleToFill" />
        <text class="button-text">移库任务</text>
      </view>
    </view>
    <view class="button-box" @click="navigateToCheck">
      <view class="min-box">
        <image src="/static/yesk.png" mode="scaleToFill" />
        <text class="button-text">盘点任务</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
    };
  },
  onLoad() {},

  methods: {
    navigateToWarehousing() {
      uni.navigateTo({
        url: "/pages/taskPage/warehousing/index",
      });
    },
    navigateToOutbound() {
      uni.navigateTo({
        url: "/pages/taskPage/outbound/index",
      });
    },

    navigateToRelocation() {
      uni.navigateTo({
        url: "/pages/taskPage/relocation/index",
      });
    },

    navigateToCheck() {
      uni.navigateTo({
        url: "/pages/taskPage/inventory/index",
      });
    },
  },
};
</script>

<style>
.button {
  width: 100%;
  margin-top: 20rpx;
}
.content {
  display: flex;
  flex-wrap: wrap;
  width: 100%; /* 设置容器宽度 */
  /* 设置容器高度 */
  padding: 20rpx;
  box-sizing: border-box;
}
.button-box {
  flex: 1 1 50%; /* 每个项目占据50%的宽度 */
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.min-box {
  padding: 20rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* border: 1px solid #0084ff; */
  background: #daedff;
  border-radius: 20rpx;
  width: 100%;
}
image {
  width: 150rpx;
  height: 150rpx;
}
.button-text {
  margin-top: 20rpx;
  font-size: 36rpx;
  color: #414141;
}
</style>
